<template>
  <div class="rule-config">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-width="150px"
    >
      <h3>考试规则设置</h3>
      
      <!-- 基本设置 -->
      <el-form-item label="允许迟到时间">
        <el-input-number
          v-model="ruleForm.lateMinutes"
          :min="0"
          :max="30"
        />
        <span class="unit">分钟</span>
      </el-form-item>

      <el-form-item label="提前交卷">
        <el-switch v-model="ruleForm.allowEarlySubmit" />
        <template v-if="ruleForm.allowEarlySubmit">
          <span class="setting-hint">至少完成</span>
          <el-input-number
            v-model="ruleForm.minExamMinutes"
            :min="10"
            :max="60"
          />
          <span class="unit">分钟</span>
        </template>
      </el-form-item>

      <!-- 防作弊设置 -->
      <h3>防作弊设置</h3>
      
      <el-form-item label="切换窗口限制">
        <el-switch v-model="ruleForm.limitWindowSwitch" />
        <template v-if="ruleForm.limitWindowSwitch">
          <span class="setting-hint">允许切换</span>
          <el-input-number
            v-model="ruleForm.maxSwitchCount"
            :min="0"
            :max="10"
          />
          <span class="unit">次</span>
        </template>
      </el-form-item>

      <el-form-item label="设备限制">
        <el-checkbox-group v-model="ruleForm.deviceRestrictions">
          <el-checkbox label="singleDevice">限制单一设备登录</el-checkbox>
          <el-checkbox label="noMultiScreen">禁止多屏幕</el-checkbox>
          <el-checkbox label="noVirtualMachine">禁止虚拟机</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="浏览器限制">
        <el-checkbox-group v-model="ruleForm.browserRestrictions">
          <el-checkbox label="fullScreen">强制全屏模式</el-checkbox>
          <el-checkbox label="noCopy">禁止复制粘贴</el-checkbox>
          <el-checkbox label="noRightClick">禁止右键菜单</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 答题设置 -->
      <h3>答题设置</h3>
      
      <el-form-item label="题目顺序">
        <el-radio-group v-model="ruleForm.questionOrder">
          <el-radio label="fixed">固定顺序</el-radio>
          <el-radio label="random">随机顺序</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="选项顺序">
        <el-radio-group v-model="ruleForm.optionOrder">
          <el-radio label="fixed">固定顺序</el-radio>
          <el-radio label="random">随机顺序</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="自动保存">
        <el-switch v-model="ruleForm.autoSave" />
        <template v-if="ruleForm.autoSave">
          <span class="setting-hint">每</span>
          <el-input-number
            v-model="ruleForm.autoSaveInterval"
            :min="30"
            :max="300"
            :step="30"
          />
          <span class="unit">秒</span>
        </template>
      </el-form-item>

      <el-form-item label="允许修改答案">
        <el-switch v-model="ruleForm.allowModify" />
      </el-form-item>

      <!-- 提醒设置 -->
      <h3>提醒设置</h3>
      
      <el-form-item label="剩余时间提醒">
        <el-checkbox-group v-model="ruleForm.timeReminders">
          <el-checkbox label="30">剩余30分钟</el-checkbox>
          <el-checkbox label="15">剩余15分钟</el-checkbox>
          <el-checkbox label="5">剩余5分钟</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="未答题提醒">
        <el-switch v-model="ruleForm.unansweredReminder" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveRules">保存规则</el-button>
        <el-button @click="resetRules">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const ruleForm = reactive({
  // 基本设置
  lateMinutes: 15,
  allowEarlySubmit: true,
  minExamMinutes: 30,

  // 防作弊设置
  limitWindowSwitch: true,
  maxSwitchCount: 3,
  deviceRestrictions: ['singleDevice', 'noMultiScreen'],
  browserRestrictions: ['fullScreen', 'noCopy'],

  // 答题设置
  questionOrder: 'fixed',
  optionOrder: 'fixed',
  autoSave: true,
  autoSaveInterval: 60,
  allowModify: true,

  // 提醒设置
  timeReminders: ['30', '15', '5'],
  unansweredReminder: true
})

const saveRules = () => {
  // 实现保存逻辑
  ElMessage.success('规则保存成功')
}

const resetRules = () => {
  // 重置表单
  Object.assign(ruleForm, {
    lateMinutes: 15,
    allowEarlySubmit: true,
    minExamMinutes: 30,
    limitWindowSwitch: true,
    maxSwitchCount: 3,
    deviceRestrictions: ['singleDevice', 'noMultiScreen'],
    browserRestrictions: ['fullScreen', 'noCopy'],
    questionOrder: 'fixed',
    optionOrder: 'fixed',
    autoSave: true,
    autoSaveInterval: 60,
    allowModify: true,
    timeReminders: ['30', '15', '5'],
    unansweredReminder: true
  })
  ElMessage.success('已重置为默认设置')
}
</script>

<style scoped>
.rule-config {
  padding: 20px;
}

h3 {
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.setting-hint {
  margin: 0 10px;
  color: #909399;
}

.unit {
  margin-left: 10px;
  color: #909399;
}
</style> 